import React, { useEffect, useState } from 'react';
import { Drawer } from 'antd';
import { FormattedMessage, useIntl } from 'umi';
import { ProDescriptions } from '@ant-design/pro-components';
import SvgIcon from '@/components/SvgIcon';
import { getMenurule } from '@/services/menurule';

type ViewDetailProps = {
  visible: boolean;
  row: Partial<API.RuleListItem>;
  onClose?: () => void;
};

const ViewDetail: React.FC<ViewDetailProps> = (props) => {
  const { visible, row, onClose } = props;
  const intl = useIntl();
  const [menus, setMenus] = useState<API.RuleListItem[]>([]);
  const getMenuList = async () => {
    const { data, code } = await getMenurule({ type: 'menu', _all: 'ty' });
    if (code === 0) {
      setMenus(data.data);
    }
  };
  useEffect(() => {
    getMenuList();
  }, []);

  const getParentName = (pid: number) => {
    const target = menus.find((item: API.RuleListItem) => +item.id === pid);
    return target ? target.remark : <FormattedMessage id="public.rootLayer" />;
  };

  const getColumns = (type: string): any[] => {
    return [
      {
        title: <FormattedMessage id="menurule.type" />,
        dataIndex: 'type',
        valueType: 'select',
        valueEnum: {
          menu: {
            text: <FormattedMessage id="menurule.menu" />,
          },
          btn: {
            text: <FormattedMessage id="menurule.btn" />,
          },
          tag: {
            text: <FormattedMessage id="menurule.tag" />,
          },
          api: {
            text: <FormattedMessage id="menurule.api" />,
          },
        },
      },
      {
        title: <FormattedMessage id="public.pid" />,
        dataIndex: 'pid',
        render: (_, record) => getParentName(+record.pid),
      },
      {
        title: <FormattedMessage id="menurule.remark" />,
        dataIndex: 'remark',
      },
      ...(type !== 'api'
        ? [
            {
              title: <FormattedMessage id="menurule.title" />,
              dataIndex: 'title',
            },
            ...(type !== 'tag'
              ? [
                  {
                    title: <FormattedMessage id="menurule.position" />,
                    dataIndex: 'position',
                    valueEnum: {
                      top: {
                        text: <FormattedMessage id="menurule.top" />,
                      },
                      left: {
                        text: <FormattedMessage id="menurule.left" />,
                      },
                      'table-top-left': {
                        text: <FormattedMessage id="menurule.table-top-left" />,
                      },
                      'table-top-right': {
                        text: <FormattedMessage id="menurule.table-top-right" />,
                      },
                      'td-operate': {
                        text: <FormattedMessage id="menurule.td-operate" />,
                      },
                    },
                  },
                ]
              : []),
            ...(type === 'menu'
              ? [
                  {
                    title: <FormattedMessage id="menurule.name" />,
                    dataIndex: 'name',
                  },
                ]
              : []),
            {
              title: <FormattedMessage id="menurule.icon" />,
              dataIndex: 'icon',
              ellipsis: true,
              render: (_, record) => {
                return <SvgIcon icon={record.icon} style={{ maxWidth: 48 }} />;
              },
            },
          ]
        : [
            {
              title: <FormattedMessage id="menurule.apiname" />,
              dataIndex: 'name',
            },
          ]),
      ...(type === 'menu'
        ? [
            {
              title: <FormattedMessage id="menurule.path" />,
              dataIndex: 'path',
              ellipsis: true,
              copyable: true,
            },
          ]
        : []),
      {
        title: <FormattedMessage id="menurule.api" />,
        dataIndex: 'api',
        ellipsis: true,
        copyable: true,
      },
      ...(type === 'menu' || type === 'tag'
        ? [
            {
              title: <FormattedMessage id="menurule.component" />,
              dataIndex: 'component',
              copyable: true,
            },
          ]
        : []),
      ...(type !== 'api'
        ? [
            {
              title: <FormattedMessage id="menurule.sort" />,
              dataIndex: 'sort',
            },
          ]
        : []),
      // {
      //   title: <FormattedMessage id="public.status" />,
      //   dataIndex: 'status',
      //   valueEnum: {
      //     1: {
      //       text: <FormattedMessage id="menurule.visible" />,
      //       status: 'Success',
      //     },
      //     2: {
      //       text: <FormattedMessage id="menurule.hidden" />,
      //       status: 'Default',
      //     },
      //     3: {
      //       text: <FormattedMessage id="menurule.disabled" />,
      //       status: 'Default',
      //     },
      //   },
      // },
      {
        title: <FormattedMessage id="public.updatetime" />,
        dataIndex: 'updatetime',
        valueType: 'dateTime',
      },
      ...(type !== 'api'
        ? [
            {
              title: <FormattedMessage id="menurule.is_permission" />,
              dataIndex: 'not_power',
              valueEnum: {
                1: {
                  text: <FormattedMessage id="public.yes" />,
                },
                0: {
                  text: <FormattedMessage id="public.no" />,
                },
              },
            },
          ]
        : []),
    ];
  };
  const columns = getColumns(row?.type);
  return (
    <Drawer
      title={
        intl.formatMessage({ id: 'public.view' }) + intl.formatMessage({ id: 'menurule.menu' })
      }
      placement="right"
      size="large"
      onClose={onClose}
      open={visible}
      // maskClosable={false}
    >
      <ProDescriptions
        bordered
        title={row?.remark}
        dataSource={{ ...row }}
        columns={columns}
        column={2}
      />
    </Drawer>
  );
};

export default ViewDetail;
